/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<u-navbar :is-fixed="true" :title="shops.shop_name" z-index="10000" :border-bottom="false">
			<view class="navbar-right" slot="right">
				<view class="dot-box right-item">
					<u-icon name="grid" color="#7b7b7b" size="44" @click="$u.route('/pagesC/shop/shopfilter',{'shop_id':shops.id})"></u-icon>
				</view>
			</view>
		</u-navbar>

		<view class="store-content" v-if="shops">
			<view class="coupon">
				<view class="pos-coupon">
					<view class="cou-top">
						<view class="left" @click="getnav('/pagesC/shop/shopIntroduce?shop_id=' + shopId)">
							<image :src="shops.logo" />
							<view>
								<text class="text">{{shops.shop_name}}</text>
								<view class="title u-flex u-col-center u-m-t-20">
									<u-tag :text="$t('品牌直营')" type="warning" size="mini" mode="light" class="u-m-r-10" />
									<view>
										<span> {{$t('好评')}} : {{shops.praise_lv}} </span>
										<span>{{$t('成交量')}} : {{shops.deal_num}}</span>
									</view>

								</view>
							</view>
						</view>

						<u-icon class="u-m-r-20" @click="clickcoll" :name="!shops.coll_shops?'heart':'heart-fill'"
							color="#ff9900" size="58" :label="!shops.coll_shops?$t('关注'):$t('已关注')" label-color="#999"
							label-pos="bottom" label-size="24"></u-icon>

					</view>
					<scroll-view scroll-x="true" show-scrollbar="false">
						<view class="cou-btn">
							<view class="btn-box" v-for="(time,index) in couponres" :key="index" @click="lingqu(time)">
								<view>
									{{$t('￥')}}{{time.dec_price}}
									{{$t('满')}}{{$t('￥')}}{{time.man_price}}{{$t('可用')}}
								</view>
								<view>
									有效期：{{time.start_time}}{{$t('至')}}{{time.end_time}}
								</view>
								<image v-if="time.have == 1" class="pos-top-img" src="/static/images/img/lingjuan.png">
								</image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="promot"
				@click="getnav(`/pagesC/goods/huodongDate?shop_id=${shops.id}&prom_id=${time.id}&goods_id=${time.goods_id}`)"
				v-for="(time,index2) in promotionres" :key="index2">
				<image :src="time.pic_url" />
			</view>

			
			<u-sticky :offset-top="offsetTop" h5-nav-height="44">
			<view class="header-filter">
				<view @click="searchIndex(1,'zonghe')" class="items " :class="[showIndex == 1? 'filter-active' : '']">
					{{$t('综合排序')}}</view>
				<view @click="searchIndex(2,'deal_num')" class="items" :class="[showIndex == 2? 'filter-active' : '']">
					{{$t('销量优先')}}</view>
				<view @click="searchIndex(3,'praise_lv')" class="items money_al"
					:class="[showIndex === 3?'filter-active':'']">
					<text>{{$t('价格')}}</text>
					<view class="over">
						<i class="iconfont icon_eb15" :class="{'ac-color': filteAl === 1}"></i>
						<i class="iconfont icon_eb14" :class="{'ac-color': filteAl === 2}"></i>
					</view>
				</view>
				<view @click="searchIndex(4,'new')" class="items" :class="[showIndex == 4? 'filter-active' : '']">{{$t('新品')}}
				</view>

				<view @click="getnav('/pagesC/shop/shopfilter?shop_id=' +shops.id)">{{$t('分类')}}</view>
			</view>
			</u-sticky>
			<view class="type-fliter u-p-10">
				<u-waterfall v-model="goodres" ref="goodsWaterfall">
					<template v-slot:left="{leftList}">
						<view v-for="(item,index) in leftList" :key="index">
							<goodsCard :info="item" class="goodsCard"></goodsCard>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view v-for="(item,index) in rightList" :key="index">
							<goodsCard :info="item" class="goodsCard"></goodsCard>
						</view>
					</template>
				</u-waterfall>
				<view class="depot" v-if="goodres.length == 0">
					<image class="img" :src="$imgGoodsNullUrl" />
					<view class="tps" style="margin-top:15upx;">{{$t('暂无商品')}}</view>
					<!-- <view class="stroll" @click="getnav('/pages/tabBar/category')">到处逛逛</view> -->
				</view>
				<!-- <loadMore :loadingType="loadingStatus"></loadMore> -->
			</view>
			<loadMore :loadingType="loadingType"></loadMore>

		</view>
	</view>
</template>

<script>
	import goodsCard from '@/components/goodsCard';
	
	let statusBarHeight = 0
	var isFollow = false
	let dataObj = {
		shop_id: '',
		// shcate_id:'',
		sort: 'zonghe',
		page: 1
	}
	export default {
		components: {
			goodsCard
		},
		data() {
			return {
				loadingType: 0, // 分页
				showIndex: 1,
				// fabShow:true,
				cxgoodres: [], // 今日必抢
				shops: '', // 商家信息
				couponres: [], // 商家优惠信息
				promotionres: [], // 商家活动推广图片
				goodres: [], // 全部商品
				showPopupBottom: false,
				position: false,
				filteAl: 0,
				valueStatus: 0, // 更新页面状态 防止页面卡死
				filterTop: '',
				shopId: '',
				isFollow: false,
				offsetTop: 0
			}
		},
		onLoad(option) {
			console.log(option)
			dataObj.page = 1
			dataObj.shop_id = option.shop_id
			this.shopId = option.shop_id
			this.$loading()
			this.getallgoods(dataObj)
			this.getshopinfo()

		},
		onShow() {
			this.setOffestTop()
			// if (!this.filterTop) {
			// 	setTimeout(res => {
			// 		let view = uni.createSelectorQuery().select(".header-filter");
			// 		view.boundingClientRect(data => {
			// 			this.filterTop = data.top
			// 		}).exec();

			// 		uni.getSystemInfo({
			// 			success: function(res) {
			// 				statusBarHeight = res.statusBarHeight
			// 			}
			// 		})

			// 	}, 800)
			// }
		},
		/**
		 * 监听页面滚动生命周期
		 */
		onPageScroll(op_time) {

			if (op_time.scrollTop > this.filterTop - 100 - statusBarHeight) {
				this.position = true
			} else {
				this.position = false
			}
		},
		
		watch: {
			showPopupBottom() {
				/**
				 * 更新页面状态 防止页面卡死
				 */

				this.statusMath(this)
			}
		},
		onReachBottom: function() {
			// 上拉加载更多
			if (this.loadingType == 1 || this.loadingType == 2) {
				return false
			}
			this.loadingType = 1

			dataObj.page++
			this.getallgoods(dataObj)
		},
		methods: {
			// 适配吸顶tab高度
			setOffestTop() {
				// #ifndef H5
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) - 2 // px转rpx
				// #endif
			
			},
			lingqu(datatime) {
				// 领取优惠券
				if (datatime.have == 0) {
					this.$loading()
					this.$http.getcoupons({
						coupon_id: datatime.id,
						shop_id: datatime.shop_id
					}).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							this.couponres.forEach((element, index) => {
								if (element.id == datatime.id) {
									element.have = 1
								}
							});
						}
					})
				}
			},
			searchIndex(index, str) {
				this.$refs.goodsWaterfall.clear();
				this.showIndex = index
				dataObj.sort = str
				dataObj.page = 1
				this.loadingType = 0

				if (index === 3) {
					if (this.filteAl === 1) {
						this.filteAl = 2
						dataObj.sort = 'height_low'
					} else {
						this.filteAl = 1
						dataObj.sort = 'low_height'
					}
				}
				this.getallgoods(dataObj)
			},
			/**
			 * 获取商家商品列表
			 */
			getallgoods(data) {
				this.$http.getallgoods(data).then(res => {
					if (res.status == 200) {

						if (dataObj.page > 1) {
							if (res.data.length == 0) {
								this.loadingType = 2
								return false
							}
							this.goodres = [...this.goodres, ...res.data]
							this.loadingType = 0

							return false
						}

						this.goodres = res.data
						this.statusMath(this)
					}
				})
			},

			/**
			 * 获取商家信息接口
			 */
			getshopinfo() {

				this.$http.getshopinfo({
					shop_id: dataObj.shop_id
				}).then(res => {
					if (res.status == 200) {
						this.shops = res.data.shops
						this.couponres = res.data.couponres
						this.promotionres = res.data.promotionres
						this.cxgoodres = res.data.cxgoodres
					}
				})
			},

			/**
			 * 关注
			 */
			clickcoll() {
				if (!uni.getStorageSync('token')) {
					return uni.redirectTo({
						url: '/pages/loginSon/login'
					});

				}
				let list = ['getshopcoll', 'getshopcancelcoll']

				let index = list[Number(isFollow)]
				this.$http[index]({
					shop_id: dataObj.shop_id
				}).then(res => {
					isFollow = !isFollow;
					this.$toast(res.mess)
					this.$set(this.shops, 'coll_shops', Number(isFollow))

				})


			}
		},

	}
</script>

<style scope lang="scss">
	@import '~uview-ui/index.scss';

	.promot {
		width: 100%;
		height: 380upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.to-tltle {
		display: flex;
		justify-content: space-between;
	}

	.type-fliter,
	.header-filter {
		position: relative !important;
	}

	.header-filter-active {
		position: fixed !important;
		width: 100%;
		left: 0;
		top: 100upx;
		z-index: 9;
		/*  #ifdef  APP-PLUS  */
		top: calc(44px + var(--status-bar-height));
		/*  #endif  */
	}

	.shop-search {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 93upx;
		height: 60upx;
		width: 550upx;
		background-color: #EEEFEF;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.iconfont {
			height: 60upx;
			line-height: 60upx;
			width: 60upx;
			text-align: center;
			color: #999;
		}

		.bus-tap {
			height: 60upx;
			line-height: 60upx;
			width: 100upx;
			text-align: center;
			color: #333333;
		}

		input {
			flex: 1;
			color: #999;
			text-align: left;
		}
	}

	.delete {
		display: flex;
		align-items: center;


		.icon_e64c {
			font-size: 50upx;
		}
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		align-items: flex-end;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #333;
		display: flex;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
</style>
